<template>
<view class="coupon">
  <view class="couponLeft" :style="'color:' + (!coupon.hasUse?'red':'#999999')">
    <view class="boxCoupon">
      <view class="boxCoupon__scope">
        <view v-if="coupon.couponType===1 || coupon.couponType===3" class="boxCoupon__scope--price">
          <view class="boxCoupon__scope--price--left">
            {{coupon.discountAmount}}
            <span style="font-weight:normal;font-size:15px;margin-left: 6px;margin-bottom: 3px">
              元
            </span>
          </view>
          <span style="font-weight:normal;font-size:15px;margin-left: 6px;margin-bottom: 3px">
            ({{coupon.productType===0?'全店商品':'指定商品'}})
          </span>
        </view>
        <view v-else class="boxCoupon__scope--price">
          <view class="boxCoupon__scope--price--left">
            {{coupon.discount}}
            <span style="font-weight:normal;font-size:15px;margin-left: 6px;margin-bottom: 3px">
              折
            </span>
          </view>
          <span style="font-weight:normal;font-size:15px;margin-left: 6px;margin-bottom: 3px">
            ({{coupon.productType===0?'全店商品':'指定商品'}})
          </span>
        </view>
      </view>
      <view class="boxCoupon__rule">
        <view class="boxCoupon__rule--left">
          {{coupon.couponType===1 || coupon.couponType===3 ?'现金券':'折扣券'}}
        </view>
        <view class="boxCoupon__rule--right" v-if="coupon.couponType===2 || coupon.couponType===3">
          满{{coupon.conditionAmount}}可使用
        </view>
        <view class="boxCoupon__rule--right" v-if="coupon.couponType===0 || coupon.couponType===1">
          无门槛使用
        </view>
      </view>
      <view class="boxCoupon__date">
        <span v-if="coupon.effectiveType === 1">领取后{{coupon.effectiveDays}}天内有效</span>
        <view v-else>
          <span class="boxCoupon__start">{{effectiveStartTime}}</span>
          <span>-</span>
          <span class="boxCoupon__end">{{effectiveEndTime}}</span>
        </view>
      </view>
    </view>
  </view>
  <view class="couponRight">
    <view class="radius--coupon" v-if="!coupon.hasUse" @tap="getCoupon">立即领取</view>
    <view class="circle" v-else>
      <view class="circle__inside">
        <view class="circle__inside--title">已领取</view>
      </view>
    </view>
  </view>
</view>
</template>
<script lang='ts'>
import { Component, Vue,Prop,Watch } from 'vue-property-decorator'
import DateUtil from "@/mixins/date";
@Component
export default class IndexCoupon extends Vue {
    @Prop()
    coupon:any
    effectiveStartTime:string=""
    effectiveEndTime: string=""
    @Watch("coupon")
    couponChange(){
        const coupon = this.coupon;
        let effectiveStartTime = this.effectiveStartTime as any;
        let effectiveEndTime = this.effectiveEndTime as any;
        if (coupon.startTime) {
        effectiveStartTime = new DateUtil("").getYMDs(coupon.startTime);
        effectiveEndTime = new DateUtil("").getYMDs(coupon.endTime);
        } else {
        effectiveStartTime = new DateUtil("").getYMDs(coupon.createTime);
        effectiveEndTime = new DateUtil("").getAddDays(
            coupon.createTime,
            coupon.effectiveDays,
        );
        }
        this.effectiveStartTime=effectiveStartTime.replace(/-/g, ".")
        this.effectiveEndTime=effectiveEndTime.replace(/-/g, ".")
        // this.useType=coupon.hasOwnProperty("canUse") ? !coupon.canUse : false
    }
  getCoupon() {
    this.$emit("getCoupon", this.coupon);
  }
}
</script>
<style lang="scss" scoped>
.coupon {
    display: flex;
    box-shadow: #CB5F13 0 10px 5px -5px;
}

.couponLeft {
    width: 175px;
    height: 88px;
    position: relative;
    background-color: white;
}

// .couponLeft:after {
//     content: '';
//     position: absolute;
//     top: 40px;
//     bottom: 0px;
//     left: -13px;
//     width: 25px;
//     height: 25px;
//     border-radius: 50px;
//     background-color: #F97417;
// }



.couponRight {
    width: 85px;
    height: 88px;
    position: relative;
    background-color: white;
    border-left: 1px dotted #E7E7E7;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

// .couponRight:after {
//     content: '';
//     position: absolute;
//     top: 40px;
//     bottom: 0px;
//     left: 72px;
//     width: 25px;
//     height: 25px;
//     border-radius: 50px;
//     background-color: #F97417;
// }




.boxCoupon {
    width: 200px;
    height: 85px;
    padding-left: 13px;
    padding-top: 10px;
    position: relative;
    flex: 0 0 200px;
    background-color: white;

    &__scope {
        font-size: 17px;
        font-weight: bolder;

        &--price {
            display: flex;
            align-items: flex-end;

            &--left {
                font-weight: bold;
                margin-right: 12px;
                font-size: 21px;
                display: flex;
                align-items: flex-end;
            }
        }

    }

    &__rule {
        display: flex;
        align-items: center;
        margin-top: 2px;
        height: 19.5px;

        &--left {
            font-weight: bold;
            font-size: 14px;
        }

        &--right {
            margin-left: 5px;
            font-size: 12px;
        }
    }

    &__date {
        margin-top: 4px;
        font-size: 11px;
        color: #C9C9C9;
    }
}





.radius--coupon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #FF0000;
}

@include b(circle) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 100%;
    border: 3px solid #999999;
    @include flex(center, center);

    @include e (inside) {
        width: 56px;
        height: 56px;
        border-radius: 100%;
        border: 1px solid #999999;
        position: relative;
        @include flex(center,center);

        @include m(title) {
            position: relative;
            top: 0px;
            left: 0px;
            font-size: 14px;
            transform: rotate(-15deg);
            color: #999999;
        }

    }
}
</style>